<template>
  <div class="page">
    <div class="top">
      <div class="box">部门管理</div>
      <div class="renovate_div">
        <img src="../assets/rush.png" alt="" class="rush" /> 刷新
      </div>
    </div>
    <div class="content">
      <div class="con_top">
        <div><img src="../assets/data.png" alt="" /> 数据列表</div>

        <div>
          <el-button
            size="small"
            class="addBtn"
            @click="dialogVisibleAdd = true"
            >添加</el-button
          >&emsp;
          <select name="" id="">
            <option value="" style="display: none">显示条数</option>
            <option value="">gfgf</option>
            <option value="">gfgffd</option>
            <option value="">ewe</option>
            <option value="">545545</option>
          </select>
          &emsp;
          <select name="" id="">
            <option value="" style="display: none">排序方式</option>
            <option value="">gfgf</option>
            <option value="">gfgffd</option>
            <option value="">ewe</option>
            <option value="">545545</option>
          </select>
        </div>
      </div>
      <div>
        <table>
          <thead>
            <tr>
              <th>部门名称</th>
              <th>上级部门</th>
              <th>部门级别</th>
              <th>成员数量</th>
              <th>添加时间</th>
              <th>是否启用</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in dataList" :key="index">
              <td>{{ item.a }}</td>
              <td>{{ item.b }}</td>
              <td>{{ item.c }}</td>
              <td>{{ item.d }}</td>
              <td class="time_td">
                <p>{{ item.e }}</p>
                <p>{{ item.f }}</p>
              </td>
              <td>
                <el-switch
                  v-model="item.g"
                  active-color="#1abc9c"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </td>
              <td class="btns">
                <span @click="edit">编辑</span>&emsp;
                <span>删除</span>
              </td>
            </tr>
          </tbody>
        </table>

        <!-- 分页 -->
        <div class="pageSplit">
          <div>
            共<span class="red">{{ total / pagesize }}</span
            >页/<span class="red">{{ total }}</span
            >条数据
          </div>
          <el-pagination
            small
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pagesize"
            layout="prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>

        <!-- 编辑 -->
        <div class="edit_div">
          <el-dialog title="编辑部门" :visible.sync="dialogVisible" width="40%">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="部门名称:" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="上级部门:" prop="up">
                <el-input v-model="ruleForm.up"></el-input>
              </el-form-item>
              <el-form-item label="职能描述:" prop="des">
                <el-input
                  type="textarea"
                  v-model="ruleForm.des"
                  placeholder="请输入内容"
                  class="descIpt"
                ></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button
                @click="
                  () => {
                    dialogVisible = false;
                    this.$refs['ruleForm'].resetFields();
                  }
                "
                size="small"
                class="noSubmit"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="submitF('ruleForm')"
                class="sureBtn"
                size="small"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </div>

        <!-- 编辑 -->
        <div class="add_div">
          <el-dialog
            title="添加部门"
            :visible.sync="dialogVisibleAdd"
            width="40%"
          >
            <el-form
              :model="ruleFormAdd"
              :rules="rules"
              ref="AddRuleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="部门名称:" prop="name">
                <el-input v-model="ruleFormAdd.name"></el-input>
              </el-form-item>
              <el-form-item label="上级部门:" prop="up">
                <el-input v-model="ruleFormAdd.up"></el-input>
              </el-form-item>
              <el-form-item label="职能描述:" prop="des">
                <el-input
                  type="textarea"
                  v-model="ruleFormAdd.des"
                  placeholder="请输入内容"
                  class="descIpt"
                ></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button
                @click="
                  () => {
                    dialogVisibleAdd = false;
                    this.$refs['AddRuleForm'].resetFields();
                  }
                "
                size="small"
                class="noSubmit"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="submitFAdd('AddRuleForm')"
                class="sureBtn"
                size="small"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </div>
      </div>
      <!-- 页面下层数据 -->
      <div class="bottom">
        <div>Copyright © www.AxureUX.com, All Rights Reserved.</div>
        <div>Email: 5698401@qq.com QQ:5698401</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //编辑input 数据
      ruleForm: {
        name: "",
        up: "",
        des: "",
      },
      //添加 input数据
      ruleFormAdd: {
        name: "",
        up: "",
        des: "",
      },
      //校验规则
      rules: {
        name: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        up: [{ required: true, message: "请输入上级部门", trigger: "blur" }],
        des: [{ required: true, message: "请输入职能描述", trigger: "blur" }],
      },
      dialogVisibleAdd: false, //添加弹框是否显示
      dialogVisible: false, //编辑弹框是否显示
      currentPage: 1, //当前页
      total: 100, //数据总量
      pagesize: 10, //一页显示几条
      //table数据
      dataList: [
        {
          a: "总务",
          b: "-",
          c: "一级部门",
          d: "10",
          e: "2017-08-05",
          f: "15:17:44",
          g: true, //是否启用（开关）
        },
        {
          a: "总务",
          b: "-",
          c: "一级部门",
          d: "10",
          e: "2017-08-05",
          f: "15:17:44",
          g: true, //是否启用（开关）
        },
        {
          a: "总务",
          b: "-",
          c: "一级部门",
          d: "10",
          e: "2017-08-05",
          f: "15:17:44",
          g: false, //是否启用（开关）
        },
      ],
    };
  },

  mounted() {},

  methods: {
    //每页显示条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    //当前页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    edit() {
      this.dialogVisible = true;
    },
    //编辑 确认提交
    submitF(formName) {
      //校验输入框
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("submit!");
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //添加
    submitFAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("submit!");
          this.dialogVisibleAdd = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
/* 改变分页选中按钮背景颜色 */
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: rgb(88, 185, 157) !important;
}

.el-pagination.is-background .el-pager li:not(.active):hover,
.el-pagination.is-background .btn-next:hover {
  color: rgb(88, 185, 157) !important;
  outline: 1px solid rgb(88, 185, 157);
}

.el-pagination.is-background .el-pager li,
.el-pagination .btn-next,
.el-pagination.is-background .btn-prev {
  background: #ffffff !important;
  outline: 1px solid lightgray;
}
</style>
<style lang="scss" scoped> 
.add_div {
  text-align: left;
}

.edit_div :deep(.el-dialog__header),
.add_div :deep(.el-dialog__header) {
  background: #f2f2f2;
  margin-bottom: 20px;
  font-weight: 600;
  border-bottom: 1px solid lightgray;
}

.edit_div :deep(.el-dialog__footer),
.add_div :deep(.el-dialog__footer) {
  border-top: 1px solid #f2f2f2;
}

.addBtn:hover {
  background: #f3f3f3;
  color: black;
  border: 1px solid lightgray;
}

.sureBtn:hover {
  background: #6ed4c0;
}

.noSubmit:hover {
  border: 1px solid #1abc9c;
  color: #1abc9c;
  background: white;
}

.el-dialog__header {
  background: #f2f2f2;
}

.edit_div .el-dialog {
  width: 40%;
}

.edit_div :deep(.el-dialog__body) {
  padding: 0 50px;
}

.descIpt :deep(textarea) {
  height: 80px;
  resize: none;
}

.sureBtn {
  background: #1abc9c;
}

.edit_div {
  text-align: left;
}

.time_td {
  vertical-align: middle;
  line-height: 2;
}

.red {
  color: red;
}

.pageSplit {
  border: 1px solid lightgray;
  padding: 20px 0;
  text-align: right;
  background: #ffffff;
  display: flex;
  justify-content: right;
  align-items: center;
  padding-right: 10px;
}

.btns {
  color: #44c8ae;
  cursor: pointer;
}

.btns span:hover {
  border-bottom: 1px solid;
}

table {
  width: 97%;
  border: 1px solid lightgray;
  border-collapse: collapse;
}

table tbody {
  background: white;
}

table tbody tr td:not(.time_td) {
  height: 60px;
  line-height: 60px;
}

table thead {
  font-weight: 600;
  background: #f9fafc;
  height: 40px;
  line-height: 40px;
}

table th,
table td {
  border: 1px solid lightgray;
}

select {
  border: 1px solid lightgray;
  outline: 0;
  color: lightgray;
  height: 30px;
  width: 90px;
  appearance: none;
  padding: 0 10px;
  background: #ffffff url(../assets/trangle.png) no-repeat;
  background-position: 68px center;
}

.content {
  padding: 20px 40px;
  box-sizing: border-box;
  background: #f5f5f5;
  min-height: 600px;
}

.con_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background: #f3f3f3;
  padding: 0 15px;
  box-sizing: border-box;
  border: 1px solid lightgray;
  /* border-bottom: 0; */
}

.box::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 20px;
  background: #1abc9c;
  vertical-align: middle;
  margin-right: 5px;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background: #f3f3f3;
  border-bottom: 1px solid lightgray;
  padding: 0 40px;
  box-sizing: border-box;
}

.renovate_div {
  border: 1px solid lightgray;
  width: 85px;
  border-radius: 1px;
  padding: 5px 0;
  background: #ffffff;
  font-size: 14px;
  cursor: pointer;
}

.renovate_div:hover {
  background: #f3f3f3;
}

.rush {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

img {
  vertical-align: middle;
}

.page {
  width: 85%;
  margin: auto;
}
.bottom {
  width: 100%;
  height: 100px;
  font-size: 14px;
  color: rgb(218, 218, 218);
  text-align: center;
}
</style>